body{
  padding-bottom:80px;
}
.top{
  width:100%;
  height:150px;
  background-color: #F3A7B9;
  overflow: hidden;
  >.lt{
    width:60px;
    position:relative;
    top:30px;
    left:50%;
    margin-left:-30px;
    img{
      width:60px;
      height:60px;
      border-radius: 50%;
    }
  }
  .name{
    position:relative;
    font-size:16px;
    color:#ffffff;
    letter-spacing: 2px;
    text-align: center;
    margin-top:100px;
  }
}
.order{
  padding:15px 10px;
  border-bottom:1px solid #dbdbdb;
  img{
    width:20px;
  }
  span{
    font-size:14px;
    position:relative;
    display: inline-block;
    top:0;
    left:10px;
    font-weight: bold;
  }
  a {
    display: inline-block;
    width:85px;
    color:#888888;
    background: url("../img/choice_03.png") no-repeat center right;
    position:relative;
    top:3px;
  }
}

.recommend{
  padding:15px 10px;
  img{
    width:20px;
  }
  a{
    margin-left:10px;
    font-size:14px;
    font-weight:bold;
  }
}
.func{
  padding:15px 20px;
  ul{
    width:100%;
    li{
      width:20%;
      div{
        width:21px;
        margin:0 auto;
        position:relative;
        img{
          width:16px;
        }
        i{
          position:absolute;
          width:15px;
          height:15px;
          border-radius: 50%;
          border:1px solid #F29FB3;
          color:#F29FB3;
          font-size:9px;
          top:-8px;
          right:-2px;
          background-color: #FFFFFF;
          text-align:center;
          line-height: 15px;
        }
      }
      p{
        font-size:12px;
        color:#888888;
        width:100%;
        text-align: center;
        margin-top:5px;
      }
    }
  }
}

.bottom{
  width:100%;
  background-color: #F9F9F9;
  border-top:1px solid transparent;
  >div{
    margin-top:5px;
    width:100%;
    background-color: #ffffff;
    padding:0 20px;
    ul{
      width:100%;
      overflow: hidden;
      li {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #dbdbdb;
        img{
          width:20px;
        }
        a {
          width: 8px;
          height:15px;
          display: inline-block;
          background: url("../img/web_icon.png") no-repeat -109px -26px;
          position:relative;
          top:3px;
        }
        span {
          font-size: 14px;
          font-weight: bold;
          position:relative;
          top:0;
          left:10px;
        }
      }
      li:nth-child(2) i{
        width:20px;height:18px;
        background: url("../img/web_icon.png") no-repeat -56px -26px;
      }
      li:nth-child(3) i{
        width:20px;height:21px;
        background: url("../img/web_icon.png") no-repeat -84px -26px;
      }
    }
  }
}

footer{
  width:100%;
  max-width: 640px;
  height:60px;
  position:fixed;
  bottom:0px;
  background-color: #fbfbfb;
  border-top:1px solid #efefef;
  ul{
    width:100%;
    margin-top:20px;
    height:40px;
    li:not(:last-child){
      border-right:1px solid #bfbfbf;
    }
    li{
      height:43%;
      width:28%;
      text-align: center;
      line-height: 30px;
      a{
        font-size:12pt;
        color:#4b4b4b;
        position:relative;
        top:-6px;
      }
    }
    li:first-child{
      width:16%;
      a{
        display: inline-block;
        width:21px;
        height:20px;
        background: url("../img/web_icon.png") no-repeat -5px -4px;
        margin-top:5px;
      }
    }
  }
}
